//DataQueryDialog.js
import React, { useState } from "react";

export const DataQueryDialog = ({ isOpen, onClose, onSubmit, onDrawGeometry }) => {
  const [indexLibraryName, setIndexLibraryName] = useState("");
  const [bigTableNames, setBigTableNames] = useState("");
  const [geometryOrGrid, setGeometryOrGrid] = useState(""); // 存储绘制的几何数据

  const handleIndexLibraryNameChange = (e) => {
    setIndexLibraryName(e.target.value);
  };

  const handleBigTableNamesChange = (e) => {
    setBigTableNames(e.target.value);
  };

  // 触发 Cesium 绘制
  const handleDrawGeometry = async () => {
    const drawnGeometry = await onDrawGeometry(); // 让父组件提供绘制逻辑
    if (drawnGeometry) {
      setGeometryOrGrid(JSON.stringify(drawnGeometry, null, 2)); // 存储几何数据
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    onSubmit(indexLibraryName, bigTableNames, geometryOrGrid);
  };

  return (
    isOpen && (
      <div style={styles.dialogBackdrop}>
        <div style={styles.dialog}>
          <h3>数据查询</h3>
          <form onSubmit={handleSubmit}>
            <div style={styles.inputGroup}>
              <label>数据源名称:</label>
              <input type="text" value={indexLibraryName} onChange={handleIndexLibraryNameChange} required />
            </div>
            <div style={styles.inputGroup}>
              <label>表名:</label>
              <input type="text" value={bigTableNames} onChange={handleBigTableNamesChange} required />
            </div>
            <div style={styles.inputGroup}>
              <label>几何范围 (GeoJSON):</label>
              <textarea value={geometryOrGrid} readOnly rows={4} style={{ width: "100%" }}></textarea>
            </div>
            <button type="button" onClick={handleDrawGeometry}>绘制Geometry</button>
            <div style={styles.buttons}>
              <button type="submit">提交</button>
              <button type="button" onClick={onClose}>取消</button>
            </div>
          </form>
        </div>
      </div>
    )
  );
};

const styles = {
  dialogBackdrop: {
    position: "fixed",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    zIndex: 1000,
  },
  dialog: {
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "5px",
    width: "400px",
  },
  inputGroup: {
    marginBottom: "10px",
  },
  buttons: {
    display: "flex",
    justifyContent: "space-between",
  },
};
